import { Text, View } from "@tarojs/components";
import calssNames from "classnames";

import "./styles.scss";

export default function Tabs(props) {
  function active(value) {
    return props?.value === value;
  }

  return (
    <View className="tabs-component">
      {props?.tabs?.map((tab, index) => (
        <View
          className="tabs"
          key={`tabs-component-${index}`}
          onClick={() => props?.onClick && props?.onClick(tab)}
        >
          <Text
            className={calssNames("tabsTitle", {
              "active-title": active(tab.value),
            })}
          >
            {tab.title || ""}
          </Text>
          <View
            className={calssNames("tab-line", {
              "active-tab-line": active(tab.value),
            })}
          />
        </View>
      ))}
    </View>
  );
}
